<template>
  <div>
    <van-nav-bar
      title="发起群聊语音"
      left-text="取消"
      @click-left="onClickLeft"
    />
    <van-search
      v-model="value"
      placeholder="搜索名字、拼音、手机号..."
      input-align="center"
    />
    <div class="box">
      <van-checkbox v-model="checked" @click="checkAll" class="frame"
        >全选</van-checkbox
      >
    </div>
    <van-checkbox-group v-model="result" ref="checkboxGroup">
      <div class="box">
        <van-checkbox name="崔作非" class="frame" @click="checkThis"
          >崔作非</van-checkbox
        >
      </div>
      <div class="box">
        <van-checkbox name="易欣星" class="frame" @click="checkThis"
          >易欣星</van-checkbox
        >
      </div>
      <div class="box">
        <van-checkbox name="刘雨迪" class="frame" @click="checkThis"
          >刘雨迪</van-checkbox
        >
      </div>
      <div class="box">
        <van-checkbox name="吴世生" class="frame" @click="checkThis"
          >吴世生</van-checkbox
        >
      </div>
      <div class="box">
        <van-checkbox name="刘伯伦" class="frame" @click="checkThis"
          >刘伯伦</van-checkbox
        >
      </div>
      <div class="box">
        <van-checkbox name="李寒山" class="frame" @click="checkThis"
          >李寒山</van-checkbox
        >
      </div>
    </van-checkbox-group>

    <div class="buttonBox">
      <p class="choice">已选择：{{ result.toString() }}</p>
      <van-button
        class="button"
        color="#4e90ff"
        size="small"
        v-if="this.result.length"
        >确定({{ result.length }}/6)</van-button
      >
      <van-button class="button" size="small" disabled type="info" v-else
        >确定({{ result.length }}/6)</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "InitiateGroupChat",
  data() {
    return {
      value: "",
      checked: false,
      result: [],
    };
  },
  methods: {
    checkAll() {
      if (this.checked) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll(false);
      }
      console.log(this.result);
    },
    checkThis() {
      console.log(this.result);
    },
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang='less'>
.box {
  height: 0.8rem;
  // width: 100%;
  background: #fff;
  padding-left: 0.3rem;
}
.frame {
  height: 100%;
  line-height: 0.8rem;
}
.buttonBox {
  background: #fff;
  width: 100%;
  height: 0.8rem;
  position: fixed;
  bottom: 0;
  line-height: 0.8rem;
  .choice {
    width: 50%;
    float: left;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .button {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    float: right;
    margin-right: 0.2rem;
  }
}
</style>